<!--
 * @Author: licongwei
 * @Date: 2022-03-07 16:32:57
 * @Description: 总体情况
-->
<template>
  <div class="M5">
    <div class="left" :class="tableShow ? 'mask' : ''">
      <div class="box box1">
        <zslb @change="queryChange"></zslb>
      </div>
      <div class="box box2">
        <zycjgzs ref="zycjgzsRef" @tableClick="tableClick"></zycjgzs>
      </div>
    </div>
    <div class="right" :class="tableShow ? 'mask' : ''">
      <div class="box box1">
        <cpi ref="cpiRef"></cpi>
      </div>
      <div class="box box2">
        <ppi ref="ppiRef"></ppi>
      </div>
    </div>
    <div class="table" v-show="tableShow">
      <jgzs-form
        ref="jbqkTableRef"
        :msg="msgData"
        :msgType="msgType"
        :msgList="msgList"
        @close="tableShow = false"
        @refresh="refresh"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import cpi from './cpns/cpi.vue'
import ppi from './cpns/ppi.vue'
import zycjgzs from './cpns/zycjgzs.vue'
import msjgzs from './cpns/msjgzs.vue'
import zslb from './cpns/zslb.vue'
import jgzsForm from './cpns/jgzsForm.vue'
import { ref } from 'vue'
const zycjgzsRef = ref()
const cpiRef = ref()
const ppiRef = ref()
const msgData = ref()
const msgType = ref()
const msgList = ref()
const tableShow = ref(false)
const radioRef = ref()
const listRef = ref()
const queryChange = (list: any, radio: any) => {
  radioRef.value = radio
  listRef.value = list
  zycjgzsRef.value?.refreshData(list, radio)
  cpiRef.value?.refreshData()
  ppiRef.value?.refreshData()
}
const refresh = () => {
  zycjgzsRef.value?.refreshData(listRef.value, radioRef.value)
}
const tableClick = (type: any, data: any, list: any) => {
  msgData.value = data
  msgType.value = type
  msgList.value = list
  tableShow.value = true
}
</script>
<style lang="less" scoped>
.M5 {
  font-size: 30px;
  color: #fff;
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  .box {
    overflow: hidden;
  }
  .mask {
    opacity: 0.4;
    pointer-events: none;
  }
  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    margin-right: 14px;
    .box1 {
      flex: 0 0 calc(50% - 7px);
    }
    .box2 {
      flex: 0 0 calc(50% - 7px);
    }
  }
  .right {
    flex: 0 0 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .box1 {
      flex: 0 0 calc(50% - 7px);
    }
    .box2 {
      flex: 0 0 calc(50% - 7px);
    }
  }
  .table {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 800px;
    height: 532px;
  }
}
</style>
